<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <!-- <el-form-item label="巡检时间">
        <el-date-picker
          clearable
          v-model="queryParams.beginCreateTime"
          type="datetime"
          placeholder="巡检时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        >
        </el-date-picker>
      </el-form-item> -->

       <el-form-item label="部门名称" prop="depatName">
        <el-input
          v-model="queryParams.depatName"
          placeholder="请输入部门名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
       <el-form-item label="维修人员" prop="nickName">
        <el-input
          v-model="queryParams.nickName"
          placeholder="请输入维修人员"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="发现人">
        <el-input
          v-model="queryParams.inspectedUsers"
          placeholder="请输入发现人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="隐患等级">
        <el-select v-model="queryParams.level" placeholder="请选择隐患等级">
          <el-option label="一般隐患" :value="1"></el-option>
          <el-option label="重大隐患" :value="2"></el-option>
        </el-select>
      </el-form-item> -->

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>

      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-tabs v-model="activeName">
      <el-tab-pane label="设备巡检列表" name="first">
        <el-table :data="ListVehicles">
          <el-table-column type="selection" width="55" align="center" />
          <!-- <el-table-column label="标题" align="center" prop="title" /> -->
          <el-table-column label="部门名称" align="center" prop="depatName">
          </el-table-column>
          <el-table-column label="本厂编号" align="center" prop="equCode">
          </el-table-column>
          <el-table-column
            label="设备规格及型号名称"
            align="center"
            prop="equName"
          />
          <el-table-column
            label="维修人员"
            align="center"
            prop="nickName"
          />
          <el-table-column
            label="维修人签名"
            align="center"
            prop="userSign"
            width="100px"
          >
            <template slot-scope="scope">
              <img
                v-if="scope.row.userSign"
                style="display: block; width: 80px; height: 40px"
                :src="scope.row.userSign"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="检修人签名"
            align="center"
            prop="userSign"
            width="100px"
          >
            <template slot-scope="scope">
              <img
                v-if="scope.row.repairSign"
                style="display: block; width: 80px; height: 40px"
                :src="scope.row.repairSign"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="检修状态"
            align="center"
            prop="userSign"
            width="100px"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.repairSign == null" type="warning">等待检修</el-tag>
              <el-tag v-else type="success">检修完成</el-tag>
            </template>
          </el-table-column>
          <!-- <el-table-column
            label="整改期限"
            align="center"
            prop="limitedTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.limitedTime, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column> -->

          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="Details(scope.row)"
                >查看详细</el-button
              >
              <el-button
                v-if="scope.row.repairSign != null"
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="download(scope.row)"
                >导出</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="ListVehiclestotal > 0"
          :total="ListVehiclestotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
      <el-tab-pane label="待我检修" name="second">
        <el-table :data="listByMyslef">
          <el-table-column type="selection" width="55" align="center" />
          <!-- <el-table-column label="标题" align="center" prop="title" /> -->
          <el-table-column label="部门名称" align="center" prop="depatName">
          </el-table-column>
          <el-table-column label="本厂编号" align="center" prop="equCode">
          </el-table-column>
          <el-table-column
            label="设备规格及型号名称"
            align="center"
            prop="equName"
          />
          <el-table-column
            label="负责人"
            align="center"
            prop="responUser"
          />
          <el-table-column
            label="签名"
            align="center"
            prop="userSign"
            width="80px"
          >
            <template slot-scope="scope">
              <img
                v-if="scope.row.userSign"
                style="display: block; width: 80px; height: 40px"
                :src="scope.row.userSign"
              />
            </template>
          </el-table-column>
          <!-- <el-table-column
            label="整改期限"
            align="center"
            prop="limitedTime"
            width="180"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.limitedTime, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column> -->

          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <!-- <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="Details(scope.row)"
                >查看详细</el-button
              > -->
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="goRepair(scope.row)"
                >去检修</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="listByMysleftotal > 0"
          :total="listByMysleftotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-tab-pane>
    </el-tabs>

    <!-- 添加 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="1200px"
      append-to-body
      @close="openClose"
    >
      <div class="top">
        <!-- <el-steps :space="200" :active="stepIndex" finish-status="success">
          <el-step title="数据录入"></el-step>
          <el-step title="选择审批人"></el-step>
          <el-step title="发起审核"></el-step>
        </el-steps> -->
      </div>
      <div class="contentForm">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="部门名称" prop="depatName">
                <el-input
                  v-model="form.depatName"
                  placeholder="请输入部门名称"
                /> </el-form-item
            ></el-col>
          </el-row>
          <el-row> </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="本厂编号" prop="equCode">
                <el-input
                  v-model="form.equCode"
                  placeholder="请输入编号"
                /> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="设备规格及型号名称" prop="equName">
                <el-input
                  v-model="form.equName"
                  placeholder="请输入编号"
                /> </el-form-item
            ></el-col>
            <!-- <el-col :span="12">
                <el-form-item label="隐患等级" prop="level">
                  <el-select v-model="form.level" placeholder="请选择隐患等级">
                    <el-option label="一般隐患" :value="1"></el-option>
                    <el-option label="重大隐患" :value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col> -->
          </el-row>

          <el-row>
            <!-- submit -->
            <el-col :span="24">
              <el-form-item label="巡检结果描述" prop="Content">
                <!-- <el-date-picker
                    clearable
                    v-model="form.limitedTime"
                    type="datetime"
                    placeholder="请选择整改期限"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    default-time="00:00:00"
                  >
                  </el-date-picker> -->
                <el-input
                  v-model="form.Content"
                  placeholder="请输入巡检结果描述"
                  type="textarea"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider>零件更换信息</el-divider>
          <div
            v-for="(item, index) in form.equipmentPartList"
            :key="index"
            style="height: 51px"
          >
            <el-row>
              <el-col :span="5"
                ><el-form-item
                  label="更换零件及耗材"
                  class="form-style"
                  label-width="110px"
                >
                  <el-input
                    v-model="item.part"
                    size="small"
                    class="special-style"
                  /> </el-form-item
              ></el-col>
              <el-col :span="5">
                <el-form-item
                  label="型号规格"
                  class="form-style"
                  label-width="70px"
                >
                  <el-input
                    v-model="item.model"
                    size="small"
                    class="special-style"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item
                  label="单位"
                  class="form-style"
                  label-width="40px"
                >
                  <el-input
                    v-model="item.unit"
                    size="small"
                    class="special-style"
                  /> </el-form-item
              ></el-col>
              <el-col :span="2">
                <el-form-item
                  label="数量"
                  class="form-style"
                  label-width="40px"
                >
                  <el-input
                    v-model="item.num"
                    size="small"
                    class="special-style"
                  /> </el-form-item
              ></el-col>
              <el-col :span="5">
                <el-form-item
                  label="厂家"
                  class="form-style"
                  label-width="40px"
                >
                  <el-input
                    v-model="item.manufacturer"
                    size="small"
                    class="special-style"
                  /> </el-form-item
              ></el-col>
              <el-col :span="2">
                <el-form-item label-width="10px">
                  <el-button
                    v-if="index + 1 == form.equipmentPartList.length"
                    type="primary"
                    size="mini"
                    @click="addItem(form.equipmentPartList.length)"
                    >+</el-button
                  >
                  <el-button
                    v-if="index !== 0"
                    type="danger"
                    size="mini"
                    @click="deleteItem(item, index)"
                    >-</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-divider>维修人员</el-divider>
          <el-row>
            <!-- <el-col :span="12">
              <el-form-item label="部门">
                <el-cascader
                  placeholder="试试搜索"
                  :options="deptOptions"
                  :props="{ value: 'id' }"
                  @change="cascaderChange"
                  filterable
                ></el-cascader>
              </el-form-item>
            </el-col> -->
            <el-col :span="16">
              <el-form-item label="维修人员" prop="people">
                <el-select v-model="form.repairId" filterable>
                  <el-option
                    v-for="item in userSelectList"
                    :key="item.userId"
                    :label="item.nickName"
                    :value="item.userId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="维修人签名" prop="people">
                <div
                  @click="signLog = true"
                  style="width: 200px; background-color: #d9d9d9"
                >
                  <el-image
                    :src="signinimg"
                    style="
                      width: 200px;
                      height: 100px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      color: #999;
                    "
                  >
                    <div slot="error">点击签名</div>
                  </el-image>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 详情弹出框 -->
    <el-dialog
      title="详情"
      :visible.sync="detailOpen"
      width="1100px"
      append-to-body
    >
      <el-table :data="ditailList">
        <el-table-column label="更换零件及耗材" align="center" prop="part" />
        <el-table-column label="型号规格" align="center" prop="model" />
        <el-table-column label="单位" align="center" prop="unit">
        </el-table-column>
        <el-table-column label="数量" align="center" prop="num">
        </el-table-column>
        <el-table-column label="厂家" align="center" prop="manufacturer" />
        <!-- <el-table-column label="备注" align="center" prop="remark" /> -->
        <!-- <el-table-column label="签名" align="center" prop="sign">
          <template slot-scope="scope">
            <img
              v-if="scope.row.sign"
              style="display: block; width: 80px; height: 40px"
              :src="scope.row.sign"
            />
          </template>
        </el-table-column> -->
      </el-table>
    </el-dialog>
    <!-- 待我审核弹出框 -->
    <el-dialog :visible.sync="mydetailOpen" width="1200px" append-to-body>
      <!-- 检修 -->
      <el-form ref="form" :model="myForm" :rules="myRules" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="检修时间" prop="repairTime">
              <el-date-picker
                v-model="myForm.repairTime"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="耗用时间" prop="repairTime">
              <el-input v-model="myForm.time" />
            </el-form-item>
          </el-col>
          <el-col :span="4" :offset="4">
            <el-form-item label="签名" prop="thing">
              <div
                @click="signLog = true"
                style="width: 200px; background-color: #d9d9d9"
              >
                <el-image
                  :src="signinimg2"
                  style="
                    width: 200px;
                    height: 100px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #999;
                  "
                >
                  <div slot="error">点击签名</div>
                </el-image>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div
              v-for="(item, index) in myForm.equipmentPartList"
              :key="index"
              style="height: 51px"
            >
              <el-row>
                <el-col :span="5"
                  ><el-form-item
                    label="更换零件及耗材"
                    class="form-style"
                    label-width="110px"
                  >
                    <el-input
                      v-model="item.part"
                      size="small"
                      class="special-style"
                    /> </el-form-item
                ></el-col>
                <el-col :span="5">
                  <el-form-item
                    label="型号规格"
                    class="form-style"
                    label-width="70px"
                  >
                    <el-input
                      v-model="item.model"
                      size="small"
                      class="special-style"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item
                    label="单位"
                    class="form-style"
                    label-width="40px"
                  >
                    <el-input
                      v-model="item.unit"
                      size="small"
                      class="special-style"
                    /> </el-form-item
                ></el-col>
                <el-col :span="2">
                  <el-form-item
                    label="数量"
                    class="form-style"
                    label-width="40px"
                  >
                    <el-input
                      v-model="item.num"
                      size="small"
                      class="special-style"
                    /> </el-form-item
                ></el-col>
                <el-col :span="5">
                  <el-form-item
                    label="厂家"
                    class="form-style"
                    label-width="40px"
                  >
                    <el-input
                      v-model="item.manufacturer"
                      size="small"
                      class="special-style"
                    /> </el-form-item
                ></el-col>
                <el-col :span="2">
                  <el-form-item label-width="10px">
                    <el-button
                      v-if="index + 1 == myForm.equipmentPartList.length"
                      type="primary"
                      size="mini"
                      @click="addItem2(myForm.equipmentPartList.length)"
                      >+</el-button
                    >
                    <el-button
                      v-if="index !== 0"
                      type="danger"
                      size="mini"
                      @click="deleteItem2(item, index)"
                      >-</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="mySunbit()">提交</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 上传图片弹出框 -->
    <!-- <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog> -->

    <!-- 电子签名 -->
    <el-dialog title="电子签名" :visible.sync="signLog" width="700px">
      <signinDia ref="sign" @setsignin="setsignin"></signinDia>
    </el-dialog>
  </div>
</template>
        
        <script>
import {
  dangerhiddenOk,
  dangerhidden,
  listRectification,
  equipmentList,
  equipmentDetails,
  equipmentAdd,
  equipmentRepair,
  equipmentDownload,
  maintenanceDownload 
} from "@/api/equip/equipInspection";
import { deptTreeSelect, listUser } from "@/api/system/user";
//import { listUser } from "@/api/system/user";
import cache from "@/plugins/cache";
import { uploadPhoto } from "@/api/city.js";

import signinDia from "@/components/signFont/index.vue";

export default {
  components: {
    signinDia,
  },
  name: "Vehicles",
  data() {
    return {
      changeIndex: 0,
      correctShow: false,
      //correctForm: {
      //  flag: 1,
      //  measure: null,
      //  flowNo: null,
      //  rectPhoto: [],
      //},
      signinimg: null,
      signinimg2: null,
      signLog: false,
    //   dialogImageUrl: "",
      dialogVisible: false,
    //   disabled: false,
      userId: cache.session.getJSON("userId"),
      ListVehicles: [],
      listByMyslef: [],

      fileList: [],
      activeName: "first",
      deptOptions: [],
      userSelectList: [],
      card: "",

      defaultProps: {
        children: "children",
        label: "label",
      },
      // 部门名称
      deptName: undefined,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      ListVehiclestotal: 0,
      listByMysleftotal: 0,

      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      detailOpen: false,
      mydetailOpen: false,
      lodingData: {},
      outOpen: false,
      mydetailData: {},
      ditailList: [],
      // 是否离场时间范围
    //   daterangeTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        beginCreateTime: null,
        inspectedUsers: null,
        depatName:null,
        nickName:null
      },
      // 表单参数
      form: {
        equipmentPartList: [
          //默认显示一条
          {
            part: "",
            model: "",
            unit: "",
            num: "",
            manufacturer: "",
          },
        ],
      },
      myForm: {
        equipmentPartList: [
          //默认显示一条
          {
            part: "",
            model: "",
            unit: "",
            num: "",
            manufacturer: "",
          },
        ],
      },
      outForm: {
        flowNo: null,
        flag: 1,
        departureTime: null,
      },
      // 表单校验
      rules: {
        depatName: [
          { required: true, message: "部门名称不能为空", trigger: "blur" },
        ],
        typeId: [
          { required: true, message: "资料类型不能为空", trigger: "change" },
        ],
      },
      myRules: {},
      outRules: {},
      //人员数据
      userList: [],
      checkUserList: [],
      userPage: {
        pageNum: 1,
        pageSize: 24,
        deptId: null,
        userName: "",
      },
    };
  },
  created() {
    this.getList();

    this.getDeptTree();

    this.getUserList();
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    //导出
    download(data){
      maintenanceDownload(data.id).then(res=>{
              console.log(res);
              if (res.success) {
                // window.location.href = res.data;
                window.open(res.data, '_self');
              }
          })
    },  

    //清空画板
    canvasResect(){
        this.$refs.sign.handleReset()
    },

    setsignin(img) {
      this.signLog = false;

      if (this.changeIndex == 0) {
        this.signinimg = img;
        this.form.userSign = img;
      } else {
        this.signinimg2 = img;
        this.myForm.repairSign = img;
      }
    },
    //表单新增方法
    addItem(length) {
      if (length >= 10) {
        this.$message({
          type: "warning",
          message: "最多可新增10条!",
        });
      } else {
        this.form.equipmentPartList.push({
          part: "",
          model: "",
          unit: "",
          num: "",
          manufacturer: "",
        });
      }
    },
    addItem2(length) {
      if (length >= 10) {
        this.$message({
          type: "warning",
          message: "最多可新增10条!",
        });
      } else {
        this.myForm.equipmentPartList.push({
          part: "",
          model: "",
          unit: "",
          num: "",
          manufacturer: "",
        });
      }
    },
    //表单删除方法
    deleteItem2(item, index) {
      this.myForm.equipmentPartList.splice(index, 1);
    },
    // 处理移除操作
    //handleRemove(file, fileList) {
    //  console.log(file, fileList);
    //},
    // 处理预览操作
    //handlePreview(file) {
    //  console.log(file);
    //},
    // 处理超出图片个数操作
    // handleExceed(files, fileList) {
    //   this.$message.warning(
        // `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
        //   files.length + fileList.length
        // } 个文件`
    //   );
    // },
    // 移除之前的操作
    // beforeRemove(file, fileList) {
    //   return this.$confirm(`确定移除 ${file.name}？`);
    // },
    // 处理文件上传操作
    //handleFileUpload(file) {
    //  let that = this;
    //  console.log(that.form);
    //  this.loading = true;
    // //  调用后端服务器的接口
    //  let data = new FormData();
    //  data.append("file", file.file);
    //  uploadPhoto("great", data)
    //    .then((resp) => {
    //      console.log(resp, that.form.photo);
    //    //   that.form.photo.push(resp.data);
    //      that.form.photo.push(resp.data);
//
    //      console.log(that.form.photo);
    //    })
    //    .catch((e) => {
    //      this.$message.error(e.message);
    //      this.$refs.upload.clearFiles();
    //    });
    //},
    // 整改处理文件上传操作
   //handleFileUpload2(file) {
   //  let that = this;
   //  this.loading = true;
   //  // 调用后端服务器的接口
   //  let data = new FormData();
   //  data.append("file", file.file);
   //  uploadPhoto("great", data)
   //    .then((resp) => {
   //      console.log(resp, that.form.photo);
   //      // that.form.photo.push(resp.data);
   //      that.correctForm.rectPhoto.push(resp.data);
   //    })
   //    .catch((e) => {
   //      this.$message.error(e.message);
   //      this.$refs.upload.clearFiles();
   //    });
   //},
    /** 查询外来车辆管理列表 */
    getList() {
      this.getListVehicles();
      this.getListByMyslef();
    },
    // 查看来访详细
    Details(data) {
      console.log(data);
      this.detailOpen = true;
      this.ditailList = data.equipmentPartList;
      // equipmentDetails(data).then(res=>{
      //     console.log(res);
      // })
    },
    //去审核
    myDetails(data) {
      console.log(data);
      this.myForm.flowNo = data.flowNo;
      this.myForm.id = data.id;
      this.mydetailOpen = true;
      this.mydetailData = data;
    },
    goRepair(data) {
      console.log(data);
      this.changeIndex = 1;
    //   this.canvasResect()
      this.signinimg2 = null
      //   this.myForm.flowNo = data.flowNo;
      this.myForm.id = data.id;
      this.mydetailOpen = true;
      //   this.mydetailData = data;
    },
    //去整改
    // goCorrect(data) {
    //   console.log(data);
    //   this.correctShow = true;
        //this.correctForm.flowNo = data.flowNo;
    // },
    // 批准出矿
    out(flowNo) {
      this.outOpen = true;
      this.outForm.flowNo = flowNo;
    },
    // 添加框关闭
    openClose() {
      this.checkUserList = [];

      this.reset();
    },

    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 查询人员
    userSearch() {
      listUser(this.userPage).then((res) => {
        this.userPage.deptId = null;
        // this.userPage.pageNum = 1;
        if (res.code == 200) {
          this.userList = res.rows;
          this.total = res.total;
        }
      });
    },
    // 人员上一页
    userFooterbefor() {
      if (this.userPage.pageNum >= 2) {
        console.log(this.userPage.pageNum);
        this.userPage.pageNum--;
        console.log(this.userPage.pageNum);
        this.userSearch();
      } else {
        this.$message("已经是第一页了");
      }
    },
    // 人员下一页

    userFooternext() {
      if (this.userPage.pageNum < Math.ceil(this.total / 12)) {
        this.userPage.pageNum++;
        console.log(this.userPage.pageNum);
        this.userSearch();
      } else {
        this.$message("已经是最后一页了");
      }
    },

    cascaderChange(data) {
      console.log(data);
      listUser({
        deptId: data[data.length - 1],
        peopleType: 1,
      }).then((res) => {
        this.userSelectList = res.rows;
      });
    },
    cascaderChange2(data) {
      console.log(data);
      this.myForm.deptName = data.join();
    },

    getUserList() {
      listUser({
        pageNum: 1,
        pageSize: 999,
      }).then((res) => {
        this.userSelectList = res.rows;
      });
    },

    userListSearch(username) {
      this.responUserId = username;
      console.log(username);
      listUser({ pageNum: 1, pageSize: 999, userName: username }).then(
        (res) => {
          if (res.code == 200) {
            console.log(res);
            this.userList = res.rows;
            this.total = res.total;
          }
        }
      );
    },

    //添加审批人
    addUser(item) {
      if (
        JSON.stringify(this.checkUserList).indexOf(JSON.stringify(item)) === -1
      ) {
        this.checkUserList.push(item);
      } else {
        this.$message.error("该审批人已经存在");
      }
    },
    // 删除审批用户
    userClose(id) {
      this.checkUserList.some((item, i) => {
        if (item.userId === id) {
          this.checkUserList.splice(i, 1);
        }
      });
    },
    // 提交巡检
    submit() {
      // this.reset();
      let data = { ...this.form };
      data.userId = this.userId;

      console.log(data);
      //   return
      // return;
      equipmentAdd(data).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess("提交成功");
          this.open = false;
          this.reset();
          this.checkUserList = [];
          this.getList();
        } else {
          this.open = false;
          this.reset();
          this.checkUserList = [];
          this.getList();
          this.$message.error("提交失败");
        }
      });
    },
    // 我的审核
    mySunbit() {

        this.myForm.equipmentPartList.forEach(it=>{
            it.equId = this.myForm.id
        })
      equipmentRepair(this.myForm).then((res) => {
        if (res.code == 200) {
          this.$message("检修完成");
        } else {
          this.$message.error("失败");
        }
        this.mydetailOpen = false;
        this.getList();
      });
    },
    //correctSunbit() {
    //  console.log(this.correctForm);
    //  this.correctForm.rectPhoto = this.correctForm.rectPhoto.join();
    //  dangerhidden(this.correctForm).then((res) => {
    //    console.log(res);
    //  });
    //},
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.userPage.deptId = data.id;

      this.userPage.pageNum = 1;

      this.userSearch();
    },

    // 隐患发现
    async getListVehicles() {
      await equipmentList({
        ...this.queryParams,
        userId: this.userId,
      }).then((res) => {
        console.log(res, "隐患发现");
        if (res.code == 200) {
          this.ListVehicles = res.rows;
          this.ListVehiclestotal = res.total;
        }
      });
    },
    // 待审核
    async getListByMyslef() {
      await equipmentList({
        ...this.queryParams,
        repairId: this.userId,
      }).then((res) => {
        console.log(res, "待审核");
        if (res.code == 200) {
          this.listByMyslef = res.rows;
          this.listByMysleftotal = res.total;
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        equipmentPartList: [
          //默认显示一条
          {
            part: "",
            model: "",
            unit: "",
            num: "",
            manufacturer: "",
          },
        ],
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      (this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        beginCreateTime: null,

        inspectedUsers: null,
        level: null,
      }),
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.getDeptTree();
      this.open = true;
      this.title = "新增巡检";
      this.changeIndex = 0;
    //   this.canvasResect()

      this.signinimg = null
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getVehicles(id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改巡检任务";
      });
    },
  },
};
</script>
        <style lang='scss' scoped>
.el-tree {
  width: 30%;
}
.topSearch {
  display: flex;
  align-items: center;
}
.userContent {
  display: flex;
}
.userList {
  display: inline-grid;
  grid-template-columns: 100px 100px 100px 100px;
  // grid-template-rows: 50px 50px;
  grid-gap: 5px;
  width: 70%;
  height: 100%;
  span {
    // width: 25%;
    padding: 8px;
    text-align: center;
    background-color: #ccc;
  }
}

.userFooter {
  position: absolute;
  right: 0;
  top: 500px;
  span {
    margin: 20px;
    color: #1890ff;
    cursor: pointer;
  }
}
.spUser {
  display: flex;
  span {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #27aa07;
    color: aliceblue;
    margin: 6px;
    text-align: center;
    line-height: 50px;

    .close {
      position: absolute;
      color: #000;
      top: 0;
      right: -5px;
      font-weight: 700;
      cursor: pointer;
      display: none;
    }
  }
  span:hover .close {
    display: block;
  }
}
// .customer-dialog{
//     .customer-form{
//       height: 320px;
//       overflow-y: auto;
//       overflow-x: hidden;
//     }
//     .address{
//         .el-form-item__content{
//           width: 89%;
//         }
//         .el-input__inner{
//           width: 100%;
//         }
//     }
//     .form-style{
//       margin-bottom: 10px;
//       .input-style{
//         width: 215px;
//       }
//       .special-style{
//         width: 194px;
//       }
//     }
//     /**滚动条的宽度*/
//     ::-webkit-scrollbar {
//       width: 8px;
//     }
//     //滚动条的滑块
//     ::-webkit-scrollbar-thumb {
//       background-color: #ccc;
//       border-radius: 5px;
//     }
//   }
</style>